<%--
  Created by IntelliJ IDEA.
  User: 24700
  Date: 2021/1/17
  Time: 12:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../basePath.jsp"%>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>个人注册</title>


    <link rel="stylesheet" type="text/css" href="${basePath}staticDwm/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}staticDwm/css/pages-register.css" />
</head>

<body>
<div class="register py-container ">
    <!--head-->
    <div class="logoArea">
        <a href="" class="logo"></a>
    </div>
    <!--register-->
    <div class="registerArea">
        <h3>注册新用户<span class="go">我有账号，去<a  href="${basePath}dwm1/tolog" target="_self">登陆</a></span></h3>
        <div class="info">
            <form class="sui-form form-horizontal">
                <div class="control-group">
                    <label class="control-label">用户名：</label>
                    <div class="controls">
                        <input name="username" id="username" type="text" placeholder="请输入你的用户名" class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label  class="control-label">登录密码：</label>
                    <div class="controls">
                        <input name="password" id="password" type="password" placeholder="设置登录密码" class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label  class="control-label">确认密码：</label>
                    <div class="controls">
                        <input name="password2" id="password2" type="password" placeholder="再次确认密码" class="input-xfat input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">手机号：</label>
                    <div class="controls">
                        <input name="phone" id="phone" type="text" placeholder="请输入你的手机号" class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label  class="control-label">短信验证码：</label>
                    <div class="controls">
                        <input name="yanzhma" id="yanzhma" type="text" placeholder="短信验证码" class="input-xfat input-xlarge">  <a id="code" onclick="getCode()">获取短信验证码</a>
                    </div>
                </div>

                <div class="control-group">
                    <label  class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input id="check" name="m1" type="checkbox" value="2" checked=""><span>同意协议并注册《品优购用户协议》</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <a class="sui-btn btn-block btn-xlarge btn-danger" onclick="yanzheng()" target="_blank">完成注册</a>
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机品优购</li>
            <li>销售联盟</li>
            <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</div>

<script type="text/javascript">
    //输入框正则
        function yanzheng(){
            //用户名正则，3到16位（字母，数字，下划线，减号）
            var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
            //密码正则，4到16位（字母，数字，下划线，减号）
            var uPwd = /^[a-zA-Z0-9_-]{4,16}$/;
            var pwd1 = document.getElementById("password").value;
            var pwd2 =document.getElementById("password2").value;
            var user = document.getElementById("username").value;
            if (!uPattern.test(user)){
                alert("用户名必须为3到16位字母，数字，下划线，减号组合")
                return false
            }
            if (!uPwd.test(pwd1)){
                alert("密码必须为4到16位字母，数字，下划线，减号组合")
                return false
            }

            if (pwd1 !== pwd2){
                alert("两次密码不一致")
                return false
            }

            var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
            var  phoneNum = document.getElementById("phone").value;
            if (!reg.test(phoneNum)){
                alert("手机号格式错误")
                return false
            }

            var check  = document.getElementById("check").checked
            if (!check){
                alert("请先同意协议并注册《品优购用户协议》")
                return  false
            }

            var code = document.getElementById("yanzhma").value;
            if (code != "7788"){
                alert("验证码错误")
                return false
            }

             reggister()
        }
        //注册请求
        function reggister() {
            var phone = document.getElementById("phone").value;
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            alert(username+"  "+password+"  "+phone);
            if (phone && username && password){
                $.get("${basePath}dwm1/register2?password="+password+"&username="+username+"&phone="+phone, function (data) {
                    if (data == 0) {
                        alert("用户名已存在")
                        return false;
                    }
                    if (data == 1){
                        alert("注册成功")
                        window.location.href="${basePath}dwm1/tolog";
                    }
                });
            }

        }

        //验证码获取（si）
        var countdown = 60
        var a =0
    function getCode(){
            console.log("进入getcode")
        if (a == 0){
            var Text = document.getElementById("code");
            console.log(Text.innerText)
            settime(Text)
        }else {
            a = 0;
        }
    }
        function settime(val) {

            if (countdown == 0) {
                val.innerText="获取到短信验证码";
                console.log(val.innerText);
                countdown =60;
                a = 3;
               val.setAttribute("onclick",getCode())
            } else {
                val.innerText=countdown+"秒后可重新发送";
                val.removeAttribute("onclick")
                console.log(val.innerText)
                countdown--;
                setTimeout(function() {
                    settime(val)
                },1000)
            }}
</script>
<script type="text/javascript" src="${basePath}staticDwm/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}staticDwm/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="${basePath}staticDwm/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="${basePath}staticDwm/js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="${basePath}staticDwm/js/pages/register.js"></script>
</body>
</html>
